<template>
  <div>
    <div>这是一个 class 绑定的例子</div>
    <div :class="{ active: isActive, 'text-danger': hasError }">
      这个 div 的 class 会根据 isActive 和 hasError 的值动态变化
    </div>
    <div :class="['box1', isActive ? 'box2' : '']">这个 div 同时绑定了 box1 和 box2 类</div>

    <div>
      <div :class="className">这个 div 绑定了一个变量 className</div>
      <button
        @click="
          (e) => {
            className = 'box3'
          }
        "
      >
        改变class
      </button>
    </div>

    <div>
      <div v-bind:style="{ width: '100px', height: '100px', color: bgColor }">234234</div>
      <button
        @click="
          (e) => {
            bgColor = 'red'
          }
        "
      >
        改变字体颜色
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isActive = ref(true)
const hasError = ref(true)

const className = ref('box1')

const bgColor = ref('lightblue')
</script>

<style scoped>
.box1 {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  color: red;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  color: red;
}
.box3 {
  width: 300px;
  height: 300px;
  background-color: orange;
  color: white;
}
</style>
